<template>
  <div style="width:600px;height:300px" ref="chart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    this.initCharts();
  },
  methods: {
    // 能耗分布应用*****
    initCharts() {
      let myChart = this.$echarts.init(this.$refs.chart);
      // 图表数据
      let data = [
        { value: 10, name: "招牌" },
        { value: 20, name: "空调" },
        { value: 30, name: "插座" },
        { value: 40, name: "照明" }
      ];
      // 图标颜色
      let colorList = [
        "rgba(5, 213, 239, .6)",
        "rgba(59, 221, 141,.6)",
        "rgba(178, 89, 217,.6)",
        "rgba(232, 226, 61,.6)"
      ];
      let colorList1 = [
        "rgba(5, 213, 239)",
        "rgba(59, 221, 141)",
        "rgba(178, 89, 217)",
        "rgba(232, 226, 61)"
      ];
      function getTu(data, colorList1) {
        const total = data.reduce((total, num) => {
          return total + Math.round(num.value);
        }, 0);
        const res = [];
        data.forEach((item, idx) => {
          res.push({
            type: "bar",
            name: item.name,
            data: [(item.value / total) * 100 + 10],
            max: 100,
            barWidth: (item.value / total) * 100 + "%",
            barGap: 0,
            itemStyle: {
              color: colorList1[idx]
            },
            coordinateSystem: "polar"
          });
        });
        return res;
      }
      const resdata = getTu(data, colorList1); // 绘制图表
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/>{c} ({d}%)"
        },
        angleAxis: {
          type: "category",
          // 去掉边线
          axisLine: {
            show: false
          }
        },
        radiusAxis: {
          max: 100,
          // 去掉刻度线
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        // 大小
        polar: {
          radius: [10, "40%"],
          center: ["35%", "55%"]
        },
        // 文字位置移动
        legend: {
          x: "55%",
          y: "35%",
          orient: "vertical",
          // 上下间距
          itemGap: 25,
          data: ["招牌", "空调", "插座", "照明"],
          textStyle: {
            color: "#6ea6ce",
            rich: {
              pecent: {
                fontSize: 18,
                fontWeight: 500
              }
            }
          },
          formatter: function(name) {
            let target;
            for (let i = 0; i < data.length; i++) {
              if (data[i].name === name) {
                target = data[i].value;
              }
            }
            const itemValueAll = data.reduce((total, num) => {
              return total + Math.round(num.value);
            }, 0);
            return ` ${name}   ${target}KW.h       {pecent|${(
              (target / itemValueAll) *
              100
            ).toFixed(2)}%}`;
          }
        },
        series: [
          // 饼图
          {
            type: "pie",
            radius: [30, "60%"],
            center: ["35%", "55%"],
            roseType: "radius",
            label: {
              show: false
            },
            data: data,
            color: colorList
          }
        ]
      };
      // 添加外层 极坐标 - 玫瑰图
      resdata.forEach(item => {
        option.series.push(item);
      });
      console.log(JSON.stringify(option));
      myChart.setOption(option);
    }
  }
};
</script>

<style>
</style>